<template>
	<view class="environmentdetail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="title-name">{{detail.title}}</view>
			<view class="title-detail">
				<view class="left">
					<image :src="detail.avatar" mode=""></image>
					<view class="department">
						<view class="name">{{detail.publisher}}</view>
						<view class="date">
							<view class="issue">发布</view><text>{{detail.publishdate}}</text>
						</view>
					</view>
				</view>
				<view class="right">阅读量：{{detail.viewnum}}</view>
			</view>
			<view class="content-msg">
				{{detail.content}}
			</view>
		</view>




	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let detail = ref({})
	let name = "环保资讯"
	let seltop = ref(1)
	onLoad((e) => {
		http({
			url: '/article/detail',
			data: {
				id: e.id
			}
		}).then((res) => {
			if (res.code == 0) {
				detail.value = res.data
			}

		})
	})
</script>

<style lang="scss" scoped>
	.environmentdetail {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.content-wrap {
			padding: 48rpx 50rpx 0 30rpx;

			.title-name {

				font-weight: bold;
				font-size: 35rpx;
				color: #070707;
				margin-bottom: 45rpx;
			}

			.content-msg {
				margin-top: 36rpx;
				margin-bottom: 41rpx;
				line-height: 50rpx;
				font-weight: 400;
				font-size: 29rpx;
				color: #333333;

			}

			.title-detail {
				display: flex;
				align-items: center;

				.left {
					display: flex;
					width: 300rpx;

					image {
						width: 54rpx;
						height: 54rpx;
						margin-right: 10rpx;
						border-radius: 50%;
					}

					.department {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {

							font-weight: 500;
							font-size: 21rpx;
							color: #070707;

						}

						.date {

							font-weight: 400;
							font-size: 17rpx;
							color: #999999;
							display: flex;

							.issue {
								width: 42rpx;
								height: 20rpx;
								background: #EEF2FF;
								border-radius: 6rpx;

								font-weight: 400;
								font-size: 13rpx;
								color: #0874FA;
								text-align: center;
								line-height: 20rpx;

								text {

									font-weight: 400;
									font-size: 17rpx;
									color: #999999;

								}
							}
						}
					}
				}

				.right {

					font-weight: 400;
					font-size: 21rpx;
					color: #9494A3;
					margin-left: 197rpx;
				}
			}
		}




	}
</style>